<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/template.xhtml">
    <ui:define name="metadata">
    </ui:define>
    <ui:define name="content">        
        <section class="content-header">
            <h1>
                Catálogo
                <small>Película</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-home"></i> Inicio</a></li>
                <li><a href="#"><i class="fa fa-table"></i> Catálogo de Película</a></li>
            </ol>
        </section>
        <p:messages autoUpdate="true" id="msgs" showSummary="true" showDetail="true" closable="true"/>
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box box-primary"> 
                        <br/>
                        <h:form id="registro">
                            <p:panel id="formulario" header="Registro de Película" toggleable="true" widgetVar="formulario">
                                <h:panelGrid columns="4" cellpadding="5">
                                    <h:outputText value="Título: *" style="font-weight:bold;"/>  
                                    <p:inputText id="nombre" value="#{catalogoPelicula.pelicula.titulo}" required="true" requiredMessage="Necesita ingresar un Título"/>

                                    <h:outputText value="Nacionalidad: *" style="font-weight:bold;"/>  
                                    <p:inputText id="nacionalidad" value="#{catalogoPelicula.pelicula.nacionalidad}" required="true" requiredMessage="Necesita ingresar una Nacionaliadad"/>  

                                    <h:outputText value="Productora: *" style="font-weight:bold;"/>  
                                    <p:inputText id="productora" value="#{catalogoPelicula.pelicula.productora}" required="true" requiredMessage="Necesita ingresar una Productora"/>  

                                    <h:outputText value="Año: *" style="font-weight:bold;"/>  
                                    <p:inputText id="anio" value="#{catalogoPelicula.pelicula.anio}" required="true" requiredMessage="Necesita ingresar una Año"/> 

                                    <h:outputText value="Género: *" style="font-weight:bold;"/>  
                                    <p:inputText id="genero" value="#{catalogoPelicula.pelicula.genero}" required="true" requiredMessage="Necesita ingresar un Género"/> 

                                    <h:outputText value="Director: *" style="font-weight:bold;"/>
                                    <p:selectOneMenu value="#{catalogoPelicula.pelicula.director.id}">
                                        <f:selectItem itemLabel="Elegir" itemValue=""/>
                                        <f:selectItems value="#{catalogoPelicula.directors}" var="d" itemLabel="#{d.nombre}" itemValue="#{d.id}"/>
                                    </p:selectOneMenu>

                                    <h:outputText value="Actor: *" style="font-weight:bold;"/>
                                    <p:selectOneMenu value="#{catalogoPelicula.pelicula.actor.id}">
                                        <f:selectItem itemLabel="Elegir" itemValue=""/>
                                        <f:selectItems value="#{catalogoPelicula.actors}" var="a" itemLabel="#{a.nombre}" itemValue="#{a.id}"/>
                                    </p:selectOneMenu>                        

                                    <h:outputText value="Trailer (Youtube): *" style="font-weight:bold;"/>  
                                    <p:inputText id="trailer" value="#{catalogoPelicula.pelicula.trailerUrl}" required="true" requiredMessage="Necesita ingresar un Trailer"/> 

                                    <h:outputText value="Portada: *" style="font-weight:bold;"/>
                                    <p:commandButton icon="ui-icon-image" value="Cargar" onclick="PF('dlgPortada').show();" process="@this"/>

                                    <f:facet name="footer">
                                        <p:commandButton value="Cancelar" process="@this" update="@form" actionListener="#{catalogoPelicula.resetForm()}" icon="ui-icon-close" style="margin-right:20px"/>
                                        <p:commandButton value="Guardar" icon="ui-icon-disk" actionListener="#{catalogoPelicula.save()}" update="@form,:consulta" style="margin-right:20px"/>
                                    </f:facet>
                                </h:panelGrid>
                            </p:panel>                
                        </h:form>
                    </div>
                </div>
                <div class="col-xs-12">
                    <div class="box box-info"> 
                        <br/>
                        <h:form id="consulta">
                            <p:panel header="Películas Registradas" toggleable="true">                
                                <p:dataTable id="tabla" widgetVar="tabla" var="p" value="#{catalogoPelicula.peliculas}"   
                                             paginator="true" rows="10" filterEvent="enter" filteredValue="#{catalogoPelicula.peliculasFilter}"  
                                             paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                             currentPageReportTemplate="(Mostrando: {startRecord} - {endRecord} de: {totalRecords}, Página: {currentPage}/{totalPages})"
                                             rowsPerPageTemplate="5,10,20,50,100,500" emptyMessage="No se encontraron registros">
                                    <f:facet name="header">
                                        <p:outputPanel>
                                            <h:outputText value="Buscar:" />
                                            <p:inputText id="globalFilter" onkeyup="PF('tabla').filter()" style="width:150px" placeholder="Ingresa una palabra"/>
                                        </p:outputPanel>
                                    </f:facet>
                                    <p:column style="text-align: center" filterBy="#{p.id}" footerText="contiene" filterMatchMode="contains"> 
                                        <f:facet name="header">  
                                            <h:outputText value="ID" />  
                                        </f:facet> 
                                        <h:outputText value="#{p.id}" />  
                                    </p:column>  
                                    <p:column style="text-align: center" filterBy="#{p.titulo}" footerText="contiene" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Título" />  
                                        </f:facet> 
                                        <h:outputText value="#{p.titulo}" />  
                                    </p:column>  
                                    <p:column style="text-align: center" filterBy="#{p.nacionalidad}" footerText="contiene" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Nacionalidad" />  
                                        </f:facet> 
                                        <h:outputText value="#{p.nacionalidad}" />  
                                    </p:column>
                                    <p:column style="text-align: center" filterBy="#{p.productora}" footerText="contiene" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Productora" />  
                                        </f:facet> 
                                        <h:outputText value="#{p.productora}" />  
                                    </p:column>
                                    <p:column style="text-align: center" filterBy="#{p.anio}" footerText="contiene" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Año" />  
                                        </f:facet> 
                                        <h:outputText value="#{p.anio}" />  
                                    </p:column>
                                    <p:column style="text-align: center" filterBy="#{p.genero}" footerText="contiene" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Género" />  
                                        </f:facet> 
                                        <h:outputText value="#{p.genero}" />  
                                    </p:column>
                                    <p:column style="text-align: center" filterBy="#{p.director.nombre}" footerText="contiene" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Director" />  
                                        </f:facet> 
                                        <h:outputText value="#{p.director.nombre}" />  
                                    </p:column>
                                    <p:column style="text-align: center" filterBy="#{p.actor.nombre}" footerText="contiene" filterMatchMode="contains">  
                                        <f:facet name="header">  
                                            <h:outputText value="Actor" />  
                                        </f:facet> 
                                        <h:outputText value="#{p.actor.nombre}" />  
                                    </p:column>
                                    <p:column headerText="Portada" style="text-align: center;" exportable="false">
                                        <p:lightBox styleClass="imagebox" >
                                            <h:outputLink value="../../resources/images/peliculas/#{p.id}.#{p.tipoPortada}" >
                                                <h:graphicImage value="../../resources/images/peliculas/#{p.id}.#{p.tipoPortada}" width="50px" height="50px"/> 
                                            </h:outputLink>
                                        </p:lightBox>
                                    </p:column>
                                    <p:column style="text-align: center" exportable="false">  
                                        <f:facet name="header">  
                                            <h:outputText value="Trailer" />  
                                        </f:facet> 
                                        <p:commandButton actionListener="#{catalogoPelicula.edit(p)}" update=":dlgTrailerP" oncomplete="PF('dlgTrailer').show();" icon="ui-icon-video"/>
                                    </p:column>
                                    <p:column headerText="Editar" style="text-align: center" exportable="false"> 
                                        <p:commandButton actionListener="#{catalogoPelicula.edit(p)}" update=":registro" icon="ui-icon-pencil"/>
                                    </p:column> 
                                    <p:column headerText="Borrar" style="text-align: center" exportable="false">  
                                        <p:commandButton icon="ui-icon-trash" actionListener="#{catalogoPelicula.remove(p)}" update="@form">
                                            <p:confirm header="Confirmación" message="Borrar registro?" icon="ui-icon-alert" />
                                        </p:commandButton>
                                    </p:column>
                                    <f:facet name="footer">
                                        Exportar datos:
                                        <h:commandLink>  
                                            <p:graphicImage value="../../resources/images/excel.png" title="Formato .xls"/>  
                                            <p:dataExporter type="xls" target="tabla" fileName="catalogoPelicula" />  
                                        </h:commandLink>
                                    </f:facet>
                                </p:dataTable>
                            </p:panel>
                        </h:form>
                    </div>
                </div>
            </div>
        </section>

        <p:confirmDialog global="true" showEffect="fade" hideEffect="explode" appendTo="@(body)">
            <h:form>
                <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
            </h:form>
        </p:confirmDialog>

        <h:form id="dlgTrailerP">
            <p:dialog id="dlgTrailer" modal="true" dynamic="true" width="450" height="350" widgetVar="dlgTrailer" closable="true" resizable="false" appendTo="@(body)" header="Trailer: #{catalogoPelicula.pelicula.titulo}">
                <p:ajax event="close" update="@form"/>
                <p:media value="http://www.youtube.com/v/#{catalogoPelicula.pelicula.trailerUrl}&amp;hl=en&amp;fs=1&amp;" width="425" height="344" player="flash"/>
            </p:dialog>
        </h:form>

        <p:dialog id="dlgPortada" modal="true" dynamic="true" width="700" height="60" widgetVar="dlgPortada" resizable="false" closable="true" appendTo="@(body)" header="Carga de Portada">
            <h:panelGrid columns="2">
                <h:form id="portada" enctype="multipart/form-data">
                    <h:outputText value="Elegir portada:" style="font-weight:bold;"/>
                    <p:fileUpload label="Elegir" value="#{catalogoPelicula.portada}"
                                  cancelLabel="Cancelar"
                                  uploadLabel="Cargar"
                                  auto="false"
                                  mode="simple"        
                                  multiple="false"
                                  sizeLimit="2097152" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" required="true"/>
                    <h:commandButton id="btnSubmit" actionListener="#{catalogoPelicula.cargaPortada}" value="Cerrar" onclick="PF('dlgPortada').hide();">
                        <f:ajax execute="@all" render="@form"/>
                    </h:commandButton> 
                </h:form>
            </h:panelGrid>              
        </p:dialog>

    </ui:define>
</ui:composition>
